<template>
  <el-card shadow="never">
    <el-table :data="tableDataA" border style="width: 100%" size="small">
      <el-table-column prop="colA" label="APN名称">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.colA" @blur="handleBlur">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="colB" label="CMMIT系统编码使用范围">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.colB"> </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="colC" label="BOSS系统编码使用范围">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.colC"> </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="colD" label="操作">
        <template>
          <el-button type="primary" size="mini" @click="showB = true">
            添加ServiceCodeId
          </el-button>
          <el-button size="mini" type="primary" @click="showB = false">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card shadow="never" v-if="showB">
      <el-table :data="tableDataB" border style="width: 100%" size="small">
        <el-table-column prop="colA" label="签约ServiceCode">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.colA"> </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="colB" label="可用套餐状态">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.colB"> </el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="primary" size="mini" @click="showC = true">
              添加ServiceCodeId
            </el-button>
            <el-button size="mini" type="primary" @click="showC = false">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-card shadow="never" v-if="showC">
        <el-table :data="tableDataC" border style="width: 100%" size="small">
          <el-table-column prop="colA" label="业务编码">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.colA"
                disabled
                placeholder="系统下发"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column prop="colB" label="业务名称">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.colB"> </el-input>
            </template>
          </el-table-column>
          <el-table-column prop="colC" label="流量类型">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.colC"
                placeholder="请选择"
                size="small"
              >
                <el-option label="信令流量" :value="1"> </el-option>
                <el-option label="默认流量" :value="2"> </el-option>
                <el-option label="定向流量" :value="3"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="colD" label="自定义名称">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.colD"> </el-input>
            </template>
          </el-table-column>
          <el-table-column prop="colE" label="操作">
            <template>
              <el-button type="primary" size="mini" @click="showD = true">
                添加urlId
              </el-button>
              <el-button size="mini" type="primary" @click="showD = false">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-card shadow="never" v-if="showD">
          <el-table :data="tableDataD" border style="width: 100%" size="small">
            <el-table-column prop="colA" label="IP">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.colA"> </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="colB" label="命名">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.colB"> </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="colC" label="端口">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.colC"> </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="colD" label="URL">
              <template slot-scope="scope">
                <el-input size="small" v-model="scope.row.colD"> </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="colE" label="操作">
              <template>
                <el-button size="mini" type="primary" @click="showD = false">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-card>
    </el-card>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      showA: true,
      showB: false,
      showC: false,
      showD: false,
      tableDataA: [
        {
          colA: '',
          colB: '',
          colC: '',
          colD: '',
          colE: ''
        }
      ],
      tableDataB: [
        {
          colA: '',
          colB: '',
          colC: '',
          colD: '',
          colE: ''
        }
      ],
      tableDataC: [
        {
          colA: '',
          colB: '',
          colC: 1,
          colD: '',
          colE: ''
        }
      ],
      tableDataD: [
        {
          colA: '',
          colB: '',
          colC: '',
          colD: '',
          colE: ''
        }
      ],
      tableDataE: [
        {
          colA: '',
          colB: '',
          colC: '',
          colD: '',
          colE: ''
        }
      ]
    }
  },

  methods: {
    handleBlur() {
      this.tableDataA = [
        {
          colA: 'CNN_KCOMMON',
          colB: 'OAB4588662KKKJ',
          colC: 'CCJHSAJHSADK887',
          colD: '',
          colE: ''
        }
      ]
      this.tableDataB = [
        {
          colA: 'code_tee002',
          colB: 'DDP_C',
          colC: '',
          colD: '',
          colE: ''
        }
      ]
      this.tableDataC = [
        {
          colA: '',
          colB: '套餐开通',
          colC: 1,
          colD: 'CC_A',
          colE: ''
        }
      ]
      this.tableDataD = [
        {
          colA: '127.0.0.1',
          colB: 'IP_A',
          colC: '8808',
          colD: '/ip_tt',
          colE: ''
        }
      ]
      this.tableDataE = [
        {
          colA: '',
          colB: '',
          colC: '',
          colD: '',
          colE: ''
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  border: none !important;
}
</style>
